Vue.component("question-option",
    {
        template: ['<li> ',
            '    <input  v-if="moudle.QType==2" type="radio" name="radio" :id="moudle.Sort" v-model="moudle.option">',
            '    <input v-else-if="moudle.QType==3" type="checkbox" placeholder="" name="radio" :id="moudle.Sort" v-model="moudle.option">',
            '    <label class="T_edit_min" :for="moudle.Sort"><input placeholder="题目内容" type="text"  v-model="moudle.Title"></label>',
            '</li>'].join(""),
        props: ['moudle']
    });


Vue.component("questionHtml",
    {
        template: '<div class="nameChose questionCon" v-if="moudle.QType == 0">' +
        '   {{moudle.Sort + 1}}.<div class=" t_edit " contenteditable="true" >姓名</div>' +
        '   <input type="text" v-model="moudle.option"> ' +
        '</div>' +
        '<div class="telChose questionCon" v-else-if="moudle.QType == 1">' +
        '   {{moudle.Sort + 1}}.<div class=" t_edit " contenteditable="true">手机号码</div> ' +
        '   <input type="number" v-model="moudle.option">' +
        '</div>' +
        '<div class="singleChose questionCon" v-else-if="moudle.QType == 2">' +
        '   {{moudle.Sort+1}}.<input class=" t_edit " v-model="moudle.question" placeholder="单选题"> ' +
        '  <ul class="">' +
        '    <question-option v-for=" item in moudle.OptionList" :moudle.sync="item"></question-option>' +
        ' </ul><div class="addMorebtn" @click="addMoreOption">点我增加选项</div> </div>' +
        '<div class="othereChose questionCon" v-else-if="moudle.QType == 3">' +
        '    {{moudle.Sort+1}}.<input class=" t_edit " v-model="moudle.Title" placeholder="多选题"> ' +
        '    <ul class="">' +
        '       <question-option v-for=" item in moudle.OptionList" :moudle.sync="item"> <question-option>' +
        '    </ul> ' +
        '<div class="addMorebtn" @click="addMoreOption">点我增加选项</div> </div>' +
        '<div class="aLineInput questionCon" v-else-if="moudle.QType == 4">' +
        '{{moudle.Sort+1}}.<input class=" t_edit " v-model="moudle.Title" placeholder="单行填空题">' +
        '   <input type="text" > ' +
        '</div>' +
        '<div class="otherLineInput questionCon" v-else-if="moudle.QType == 5">' +
        '    {{moudle.Sort+1}}.<input class=" t_edit " v-model="moudle.Title" placeholder="多行填空题">' +
        '    <textarea type="text" ></textarea>' +
        '</div>',
        props: ['moudle'],
        methods: {
            addMoreOption: function () {

                 this.$parent.addOptionHtml(this.moudle.Sort);
            }
        }
    });


var vm = new Vue({
    el: "#questionPage",
    data: {
        isShow: true,
        title: "",
        isEmpty: 0,
        questionCon: {
            "Key": "111",
            "QuestionPaperInfo": {
                "Serid": "WJ201701140001",
                "Title": "问卷标题",
                "Description": null,
                "AddName": "",
                "AddNameId": "1",
                "AddTime": +new Date(),
                "CanRepeat": false,
                "Question": []
            }
        }
    },
    computed: {},
    methods: {
        addNewOne: function() {
            this.isShow = false;
        },
        addMoudle: function(index, type) {
            //var qType;
            //switch (type) {
            //    case 0:
            //        qType = "姓名";
            //        break;
            //    case 1:
            //        qType = "手机号码";
            //        break;
            //    case 2:
            //        qType = "单选题";
            //        break;
            //    case 3:
            //        qType = "多选题";
            //        break;
            //    case 4:
            //        qType = "单行填空题";
            //        break;
            //    case 5:
            //        qType = "多行填空题";
            //        break;
            //    default:
            //        qType = "else";
            //        break;
            //
            //}

            var questionTit = (type === 0) ? "姓名" : ((type === 1) ? "手机号码" : "");
            return {
                "Id": "WJ201701140001_1",
                "QType": type,
                "Title": questionTit,
                "OptionList": [],
                "Sort": index
            }
        },
        addOption: function(index, type) {

            return {
                "Id": index,
                "Title": "",
                "Value": 1,
                "IsOthers": false,
                "Sort": index,
                "QType": type,
            }
        },
        addOptionHtml: function(index) {
            console.log(index);

            var question = this.questionCon.QuestionPaperInfo.Question[index];
            var options = question.OptionList;
            console.log(options);
            index = options.length;

            var item = this.addOption(index, question.QType);

            //console.log(data, index);

            options.splice(index, 0, item);
        },
        addMoreOption: function(index) {
            this.addOptionHtml(index);
        },
        addHtml: function(type) {

            this.isEmpty = 1;

            var index = this.questionCon.QuestionPaperInfo.Question.length;

            var item = this.addMoudle(index, type);

            this.questionCon.QuestionPaperInfo.Question.splice(index, 0, item);
            console.log(index, item);
            (type === 2 || type === 3) ? this.addOptionHtml(index) : "";
        },
        addName: function() {
            var type = 0;
            this.addHtml(type);
        },
        addTel: function() {
            var type = 1;
            this.addHtml(type);
        },
        addSingleChose: function() {
            var type = 2;
            this.addHtml(type);
        },
        addMoreChose: function() {
            var type = 3;
            this.addHtml(type);
            //this.addOptionHtml();

        },
        addSingle: function() {
            var type = 4;
            this.addHtml(type);
        },
        addMore: function() {
            var type = 5;
            this.addHtml(type);
        },
        save: function() {
            
            var that = this;
            $.ajax({
                type: "Post",
                url: "../QuetionEdit/AjaxCall.ashx?action=SetQuestion",
                data: JSON.stringify(this.questionCon),
                dataType: 'json',
                success: function (data) {
                   
                },
                error: function (msg) {
                    alert("网络错误，请重新尝试！");
                }
            });
        }

}
});